export default function updateNodeElement (newElement,virtualDOM,oldVirtualDOM={}){
    // 获取新节点对应的属性对象
    const newProps = virtualDOM.props || {};
    // 获取旧节点对应的属性对象
    const oldProps = oldVirtualDOM.props || {};
    // 遍历所有的非「children」的属性值  然后依次进行设置
    Object.keys(newProps).forEach(propsName => {
        // 获取属性值
        const newPropsValue = newProps[propsName]
        const oldPropsValue = oldProps[propsName]
        if(newPropsValue !== oldPropsValue){
            if(propsName.slice(0,2) === 'on'){
                // 是事件绑定
                const eventName = propsName.toLowerCase().slice(2)
                // 添加事件
                newElement.addEventListener(eventName,newPropsValue)

                // 设置完新DOM的事件后需要考虑将旧DOM的事件处理函数给卸载掉
                if(oldPropsValue) {
                    newElement.removeEventListener(eventName,oldPropsValue)
                }
            } else if(['value','checked'].includes(propsName)){
                newElement[propsName]=newPropsValue
            } else if(propsName !== 'children'){
                if(propsName === 'className'){
                    newElement.setAttribute('class',newPropsValue)
                } else {
                    // 普通属性  直接setAttribute即可
                    newElement.setAttribute(propsName,newPropsValue)
                }
            }
        }
    })

    // 判断属性被删除了
    Object.keys(oldProps).forEach(propsName => {
        const newPropsValue = newProps[propsName]
        const oldPropsValue = oldProps[propsName]
        if(!newPropsValue){
            // 属性被删除了  区分是事件还是普通属性
            if(propsName.slice(0,2) === 'on'){
                // 是事件绑定
                const eventName = propsName.toLowerCase().slice(2)
                // 添加事件
                newElement.removeEventListener(eventName,oldPropsValue)
            } else if(propsName !== 'children'){
                newElement.removeAttribute(propsName)
            }
        }
    });
}